<template>
	<view class="jk-rate" @touchmove="handleTouchMove($event)">
        <input type="text" :name="name" :value="value" class="jk-rate-hide-input" />
        <view
            v-for="(item, index) in count"
            :key="item"
            :class="['jk-rate-star', {'jk-rate-current': value > index}]"
            :data-index="index" 
            @tap="handleClick">
            <jk-icon type="ios-star" :size="size" />
        </view>
        <view class="jk-rate-text" v-if="value !== 0">
            <slot>{{value}}</slot>
        </view>
    </view>
</template>

<script>
    import JkIcon from '../../icon/index.js'
	export default {
        name: "Rate",
        model: {
            event: 'change',
            prop: 'value'
        },
		props : {
            count : {
                type : Number,
                default : 5
            },
            value : {
                type : Number,
                default : 0
            },
            disabled : {
                type : Boolean,
                default : false
            },
            size : {
                type : Number,
                default : 20
            },
            name : {
                type : String,
                default : ''
            }
        },
        components:{ JkIcon },
        data() {
            return {
                touchesStart : {
                    pageX : 0
                },
                curValue: null
            }
            
        },
        methods: {
            handleClick(e){
                if( this.disabled ){
                    return false;
                }
                const index = e.currentTarget.dataset.index;
                this.curValue = Number(index) + 1;
                this.$emit('change', this.curValue)
            },
            handleTouchMove(e){
                if( this.disabled ){
                    return;
                }
                if( !e.touches[0] ){
                    return;
                }
                const movePageX =  e.touches[0].pageX;
                const space = movePageX - this.touchesStart.pageX;

                if( space <= 0 ){
                    return;
                }
                let setIndex = Math.ceil( space/this.size );
                setIndex = setIndex  > this.count ? this.count : setIndex;
                this.value = setIndex;
                this.$emit('change', this.value)
            }
        },
        watch: {
            value: {
                handler(val){
                    this.curValue = val
                },
                immediate: true
            }
        }
	}
</script>

<style lang="scss">
.jk-rate{
    margin: 0;
    padding: 0;
    font-size: 20px;
    display: inline-block;
    vertical-align: middle;
    font-weight: normal;
    font-style: normal;
    &-hide-input{
        display: none;
    }
    &-star{
        display: inline-block;
        color: #e9e9e9;
    }
    &-current{
        color: #f5a623;
    }
    &-text{
        display: inline-block;
        vertical-align: middle;
        margin-left: 6px;
        font-size: 14px;
    }
}
</style>
